<template>
  <div>
    <h1>详情页面</h1>

    <p>水果参数 id : {{ $route.query.id }}</p>
    <p>水果参数 name : {{ $route.query.name }}</p>

    <router-link to="/detail?id=002&name=banana">猜你喜欢，Banana</router-link>
  </div>
</template>

<script>
export default {
  created() {
    // 当详情页面组件创建完成之后，拿到id去获取后端的接口数据
    // 猜你喜欢时，组件会被复用，导致生命周期的钩子函数不会重复执行。带来的问题是：页面数据会有问题。。观察下面的console的输出情况
    this.getData();
  },

  methods: {
    getData() {
      // 调接口,拿数据
      console.log("=== 准备去调用ajax了");
    },
  },

  // watch: {
  //   // 第一种方案：监听 $route
  //   $route() {
  //     this.getData();
  //   },
  // },

  // 第二种方案：使用 beforeRouteUpdate 钩子函数 导航守卫
  // 路由信息对象$route 发生更新之前会执行
  beforeRouteUpdate(to, from, next) {
    console.log("to: ", to);
    console.log("from: ", from);
    // to -> 去哪里
    // from -> 从哪里来的
    // next -> 是一个函数,如果不执行这个函数,将不会放行....
    this.getData();
    next();
  },
};
</script>
